<template>
  <div class="containers">
    <swiper
      :modules="modules2"
      :loop="true"
      :slides-per-view="0"
      :space-between="0"
      :speed="900"
      :autoplay="{ delay: 3000, disableOnInteraction: false }"
      :navigation="navigation2"
      :slidesPerView="'auto'"
      loopFillGroupWithBlank="true"
      :pagination="false"
      :centeredSlides="true"
      class="swiper-container2"
    >
      <swiper-slide v-for="(item, i) in state.banner" :key="i">
        <div
          class="banner_img"
          :style="{ backgroundImage: `url(${item.image})` }"
        ></div>
      </swiper-slide>
    </swiper>
      <img ref="prevRef2" class="leftArrow2" :src="state.LeftArrow" />
      <img ref="nextRef2" class="rightArrow2" :src="state.RightArrow" />
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import {
  Navigation,
  Pagination,
  Scrollbar,
  Autoplay
} from 'swiper/modules'
import 'swiper/css'
import slide1 from '../assets/slide1.png'
import slide2 from '../assets/slide2.png'
import slide3 from '../assets/slide3.png'
import LeftArrow from '../assets/arrow_left.png'
import RightArrow from '../assets/arrow_right.png'

const state = reactive({
  LeftArrow: LeftArrow,
  RightArrow: RightArrow,
  banner: [
    { image: slide1 },
    { image: slide2 },
    { image: slide3 },
  ]
})
const navigation2 = ref({
  prevEl: '.leftArrow2',
  nextEl: '.rightArrow2'
})
const pagination2 = ref({
  el: '.swiper-pagination2',
  clickable: false
})
const modules2 = [Autoplay, Pagination, Navigation, Scrollbar]
</script>

<style lang="scss" scoped>
.containers {
  width: 100%;
  overflow: hidden !important;
  display: flex;
  justify-content: center;
  position: relative;
}

.swiper-container2 {
  // overflow: visible !important;
  position: relative;
  // width: 1498px;
  width: 1202px;
  height: 620px;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
}

.banner_img {
  width: 1202px;
  background-size: 100%, 100%;
  height: 620px;
  margin:0 auto;
}
.leftArrow2 {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1000;
  transform: translateY(-50%);
  cursor: pointer;
}

.rightArrow2 {
  position: absolute;
  top: 50%;
  right: 0px;
  z-index: 1000;
  transform: translateY(-50%);
  cursor: pointer;
}

//页码样式穿透 也可自定义页码
:deep(.swiper-pagination) {
  bottom: 20px;
}
:deep(.swiper-pagination-bullet) {
  border: solid 1px #999;
  margin: 0 6px;
}
:deep(.swiper-pagination-bullet-active) {
  background: #4d4d4d;
}
:deep(.swiper-pagination-bullet:hover) {
  background: #4d4d4d;
  opacity: 0.6;
}
:deep(.swiper-slide) {
  width:100%;
  position: relative;
  border-radius: 15px;
  transition: transform 2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
:deep(.swiper-slide-prev) {
  transform: scale(0.9);
}
:deep(.swiper-slide-next) {
  transform: scale(0.9);
}
:deep(.swiper-slide-active) {
}
</style>
